<script setup lang="ts">
import { Icon } from '@iconify/vue';

function openUrl() {
  window.open('https://doulingyang.cn');
}
</script>

<template>
  <div>
    <div
      class="mb-4 flex select-none items-center justify-between rounded-xl px-2 py-6"
      style="background: linear-gradient(4deg, #f88900 0%, #f9d423 100%)"
    >
      <div class="flex w-4/5 items-center">
        <div class="mr-6">
          <img
            height="130px"
            src="https://wtplug.oss-cn-hangzhou.aliyuncs.com/webimages/logo192.png"
            width="130px"
          />
        </div>
        <div class="w-4/5">
          <a-space :size="60">
            <div
              class="select-em mb-4 text-7xl font-medium normal-case text-black"
            >
              抖羚羊
            </div>
            <div class="midnight w-full text-3xl font-medium text-black">
              <div>老板运营都在用的智能工作台</div>
              <div class="mt-2" style="text-indent: 320px">
                工具用的好 下班就更早
              </div>
            </div>
          </a-space>

          <div class="flex w-full items-center justify-between text-white">
            <a-space class="w-40 text-3xl">
              <Icon
                icon="ant-design:check-circle-filled"
                style="color: #34c30c"
              />
              搬家上货
            </a-space>
            <a-space class="w-40 text-3xl">
              <Icon
                icon="ant-design:check-circle-filled"
                style="color: #34c30c"
              />
              一键下单
            </a-space>
            <a-space class="w-40 text-3xl">
              <Icon
                icon="ant-design:check-circle-filled"
                style="color: #34c30c"
              />
              商品优化
            </a-space>
            <!-- 
            <div>✅ 一键下单</div>

            <div>✅ 商品优化</div> -->
            <!-- <div>更多功能 ⬇️</div> -->
            <!-- <a-space class="w-40 text-3xl">
              更多功能
              <Icon icon="bi:arrow-down-circle-fill" style="color: #0fd5b8ff" />
            </a-space> -->
            <a-space
              class="w-40 cursor-pointer text-3xl hover:text-blue-500"
              @click="openUrl"
            >
              下载插件
              <Icon icon="bi:arrow-down-circle-fill" style="color: #0fd5b8ff" />
            </a-space>
          </div>
        </div>
      </div>
      <div class="w-1/5">
        <a-space :size="50">
          <a-space align="center" direction="vertical">
            <img
              src="https://wtplug.oss-cn-hangzhou.aliyuncs.com/1688admin/Carousel/kefuw.png"
              width="120"
            />
            <div class="text-xl font-medium text-white">联系客服</div>
          </a-space>
          <a-space align="center" direction="vertical">
            <img
              src="https://wtplug.oss-cn-hangzhou.aliyuncs.com/1688admin/Carousel/zixunw.png"
              width="120"
            />
            <div class="text-xl font-medium text-white">更多咨询</div>
          </a-space>
        </a-space>
      </div>
    </div>
    <!-- <div class="flex items-center justify-center" style="height: 230px">
      <img
        alt=""
        class="border-border h-full w-full rounded-xl"
        src="https://wtplug.oss-cn-hangzhou.aliyuncs.com/1688admin/Carousel/topImg.png"
      />
    </div> -->
  </div>
  <!-- <a-carousel>
    <div class="h-full w-full">
      
    </div>
  </a-carousel> -->
</template>
<style scoped>
/* .select-em {
  font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC',
    'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 150px;
  color: transparent;
  text-align: center;
  background: linear-gradient(to bottom, #ffb6ff, #b344ff);
  background-clip: text;
} */
</style>
